<template>
	<view>
		<x-details-nav :ishowZw='false' :title_bg='navbaractive' titleText='商品详情'></x-details-nav>
		<!-- 轮播 -->
		<view class="position-r">
			<x-rotation height="700" :imgArr='goodsData.image'></x-rotation>
			<text class="zekou" :style="{top:statusBarHeight+navBarHeight+'px'}"
				v-if="goodsData.flag && goodsData.flag>0">{{goodsData.flag}}折</text>
		</view>
		<!-- 活动板块 -->
		<view class="huodong mg-30 d-flex " v-if="goodsType>0">
			<view class="left flex-grow1 d-flex aling-centen textColor-white">
				<text class="font-26 ml-30">{{goodsType==1?'团购价':'秒杀价'}} ￥</text>
				<text class="font-32">{{goodsData.list[selectedConfig].price_seckill}}</text>
			</view>
			<view class="right d-flex-yCenter jfy-center flex-d">
				<text class="font-24">距结束仅剩</text>
				<view class="d-flex aling-centen time">
					<text>{{day | subdata}}</text>:
					<text>{{hour | subdata}}</text>:
					<text>{{ branch | subdata}}</text>:
					<text>{{second |subdata}}</text>
				</view>
			</view>
		</view>
		<!-- 商品title信息 -->
		<view class="d-flex jfy-sb pg-30">
			<text class="" style="margin-right:100rpx ;">{{goodsData.title}}</text>
			<view class="d-flex flex-d">
				<text
					class="Price-color">￥{{goodsData.list[selectedConfig][goodsType==0?'price_selling':'price_seckill']}}</text>
				<text class="text-decoration">￥{{goodsData.list[selectedConfig].price_market}}</text>
			</view>
		</view>
		<!-- 正在参与拼团的列表 -->
		<template v-if="goodsType==1 && ptList.length">
			<view class="mx-30 font-28  border-b" style="padding-bottom: 20rpx;" >可参与拼团</view>
			<view class="pg-30 banner">
				<swiper vertical :autoplay="true" :style="{height:banners.height+'rpx'}" circular :interval="2800"
					:display-multiple-items='banners.items' :duration="800">
					<swiper-item class="w-100 d-flex  d-flex-yCenter-sb font-28"
						v-for="(item,index) in ptList" :key='index'>
						<view class="d-flex-yCenter swiper-item">
							<image :src="item.pintuanActivityList[0]" mode=""></image>
							<text class="ml-20 font-24">还差{{item.surplus_num}}人成团</text>
						</view>
						<view class="btn" @tap='ptEvent(item.id)'>去拼团</view>
					</swiper-item>
				</swiper>
			</view>
		</template>
		<!-- 配置规格信息 -->
		<template v-for="(item,index) in goodsData.specs">
			<view class="px-30 py-20 config" :key='index'>
				<text>{{item.name || '规格'}}</text>
				<view class="d-flex aling-centen flex-w box-item ">
					<template v-for="(val,leng) in item.list">
						<text @tap='configEvent(item,index,val,leng)' :style="{opacity:leng>3?0.4:1}" class="item"
							:class="leng==configActve[index]?'actve':''" :key='leng'>{{val.name}}</text>
					</template>
				</view>
			</view>
		</template>
		<view class="d-flex-yCenter-sb px-30 py-20">
			<text>购买数量</text>
			<view class="d-flex aling-centen">
				<u-icon @tap='addSun(0)' name="minus" color="#000" size="30"></u-icon>
				<text class="mx-30">{{goods_sum}}</text>
				<u-icon @tap='addSun(1)' name="plus" color="#000" size="30"></u-icon>
			</view>
		</view>
		<!--  -->
		<navigator class="pg-30 jairu d-flex aling-centen jfy-sb my-20" url='/goodsPackage/jiaru-hk/jiaru-hk'>
			<text>加入虎氪</text>
			<u-icon name="arrow-right" color="#000" size="30"></u-icon>
		</navigator>
		<!--  -->
		<view class="pg-30 text-al-center">
			商品详情
		</view>
		<!-- 商品详情 -->
		<view class="pt-30 border-b">
			<jfy-web ref="htmlbox"></jfy-web>
		</view>
		<!--  -->
		<!-- <view class="pl-30 pt-30 ">
			猜你喜欢
		</view>
		<x-commodity-list img="../../static/chanpt/csdfec.webp"></x-commodity-list> -->
		<view style="margin-bottom: 130rpx;" @tap='oagescroll' class="text-al-center mt-30">回到顶部+</view>
		<!-- ------------------------------------------------------------------------------------ -->
		<!-- 底部菜单  客服中心/购物车等... ...-->
		<x-goods-nav @rightEvent='rightEvent' :activity_id='activity_id' :goodsType='goodsType' :info="info"></x-goods-nav>

		<!-- 弹出层 -->
		<!-- <view>
			<wybPopup 
				ref="popup" 
				type="bottom" 
				height="700" 
				width="500" 
				radius="6" 
				:showCloseIcon="true"
			>
				<view class="">
					我是一直小压制
				</view>
			</wybPopup>
		</view> -->
	</view>
</template>

<script>
	/**
	 * 商品详情的富文本内容展示
	 * this.$refs.htmlbox.setContent(覅文本内容);
	 * */
	import jfyWeb from '@/components/jyf-parser/jyf-parser.vue'

	import uniGoodsNav from '@/components/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	/**
	 * 弹出层/选择规格
	 * 实例方法方法
	 * this.$refs.popup.hide() // 关闭
	 * this.$refs.popup.show() // 显示
	 * */
	// import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		http_user_shop_cart_add,
		http_goods_details,
		http_user_shop_cart_num,
		http_user_seckill_order_getBuyNum,
		http_mallpintuan_goods_wait_lts
	} from '@/config/apiRouter.js'
	export default {
		components: {
			jfyWeb,
			uniGoodsNav,
			// wybPopup
		},
		data() {
			return {
				navbaractive: false,
				info: 0, // 购物车数量
				configActve: [], // 规格选择索引
				selectedConfig: 0, // 当前选中的规格 goodsData.list
				number_stock: 0, // 当前规格的商品库存
				goods_sum: 1, // 当前购买数量
				cid: '', // 商品id
				goodsData: {
					list: [{
						price_selling: 0,
						price_market: 0,
						price_seckill: 0
					}]
				},
				ptList:[],//正在参与拼团的列表
				goodsType: 0, // 0 普通商品 1拼团商品，2秒杀商品
				day: 0, // 天
				hour: 0, //时
				branch: 0, // 分
				second: 0, // 秒
				Time: null,
				activity_id: 0, // 参团id 如果不是加入拼团就默认为0  如果加入拼团就为团id
				scene: null, //推荐id

			};
		},
		filters: {
			// 处理时间结束倒计时
			subdata(e) {
				return e < 10 ? '0' + e : e
			}
		},
		computed: {
			...mapGetters(['uname', 'statusBarHeight', 'navBarHeight']),
			banners(){
				if(this.ptList.length==1){
					return {
						height:75,
						items:1
					}
				}
				if(this.ptList.length==2){
					return {
						height:170,
						items:2
					}
				}
				return  {
						height:270,
						items:3
					}
			}
		},
		watch: {
			uname: {
				immediate: true,
				handler() {
					try {
						if (!this.userMD.getToken()) return
						this.getCartSun()
					} catch (e) {
						//TODO handle the exception
						console.log(e);
					}
				}
			}
		},
		onShow() {
			if(this.goodsType==1)this.getPTlist()
		},
		onLoad(opens) {
			// opens.activity_id=98
			this.cid = opens.cid
			if (opens.scene) this.scene = opens.scene
			if (opens.activity_id) {
				this.activity_id = opens.activity_id
				uni.showModal({
					title: '邀请提示',
					showCancel: false,
					content: '你的好友正在参与拼团，赶快点击下方的 "加入团购" 和好友一起拼团吧！',
				})
			}
			http_goods_details({
				data: {
					id: this.cid
				}
			}).then(res => {
				this.goodsType = res.data.type
				console.log(this.goodsType, '商品类型');
				this.goodsData = res.data
				res.data.specs.map(res => {
					// 默认规格选择
					this.configActve.push(0)
				})
				// 默认选中项的商品库存
				this.number_stock = res.data.list[0].number_stock
				// 商品详情描述内容-富文本
				this.$refs.htmlbox.setContent(res.data.content);
				if(this.goodsType==1)this.getPTlist()
				if (this.goodsType > 0) this.goodsTime()
			})
		},
		// 页面销毁前清楚定时器
		onUnload() {
			clearInterval(this.Time)
		},
		methods: {
			// 参与拼团
			ptEvent(e){
				let data={
					content:{
						type:1,
						activity_id:e
					}
				}
				this.rightEvent(data)
			},
			// 获取正在参与拼团的用户列表
			getPTlist(){
				http_mallpintuan_goods_wait_lts({
					data:{
						id:this.goodsData.activity_goods_id,
						limit:20
					}
				}).then(res=>{
					this.ptList=res.data.data
					console.log(res,'正在拼团');
				})
			},
			// 活动商品时间处理
			goodsTime() {
				// 活动结束时间处理

				var dataTime = () => {
					let time = parseInt(Date.now() / 1000) // 当前时间
					let EndTime = this.goodsData.end_time // 结束时间  、秒
					let succTime = EndTime - time // 距离结束时间 、秒
					// 计算天
					let day = parseInt(succTime / (24 * 60 * 60))
					// 计算小时
					let hour = parseInt(succTime % (24 * 60 * 60) / (60 * 60))
					// 计算分钟
					let branch = parseInt(succTime % (60 * 60) / 60)
					// 秒
					let second = parseInt(succTime % 60)

					this.day = day
					this.hour = hour
					this.branch = branch
					this.second = second
					// 活动结束
					if (this.day == 0 && this.hour == 0 && this.branch == 0 && this.second == 0) {
						clearInterval(this.Time)
						let page = getCurrentPages()
						let beforPages = page[page.length - 2]
						beforPages.$vm.getactivitydata()
						uni.showModal({
							title: '提示',
							content: '该商品的活动已结束',
							showCancel: false,
							success: function(res) {
								uni.navigateBack({
									delta: -2
								})
							}
						});
					}
					// console.log(day,hour,branch,second);
				}
				dataTime()
				this.Time = setInterval(() => {
					dataTime()
				}, 1000)

			},
			// 获取购物车数量
			getCartSun() {
				http_user_shop_cart_num().then(res => {
					this.info = res.data
				})
			},
			// 回到顶部
			oagescroll() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			// 加入/购买
			rightEvent(e) {
				console.log(e);
				if (!this.userMD.getToken()) {
					uni.navigateTo({
						url: '/pages/login/login?scene=' + this.scene
					})
					return
				}
				if (this.number_stock < this.goods_sum) {
					uni.showToast({
						title: '该规格商品库存不足！',
						icon: 'none'
					})
					return
				}
				let data = {
					goods_id: this.cid,
					goods_spec: this.goodsData.list[this.selectedConfig].goods_spec,
					goods_number: this.goods_sum
				}
				this.activity_id=e.content.activity_id || 0
				e.content.type ? this.purchase(data) : this.addToCart(data)
			},
			// 加入购物车
			addToCart(data) {
				http_user_shop_cart_add({
					data
				}).then(res => {
					uni.showToast({
						title: '添加成功'
					})
					setTimeout(() => {
						this.getCartSun()
					}, 800)
				})
			},
			// 立即购买
			async purchase(data) {
				let objJSON = [
					data
				]
				let datas = {
					goods_data: JSON.stringify(objJSON),
					type: this.goodsType,
				}
				// 拼团id
				if (this.goodsType == 1)datas.activity_id=this.activity_id
				// 判断活动商品是否超出限购
				if (this.goodsType > 0) {
					// 判断当活动商品最多购买数量
					if (this.goodsData.max_buy_num < this.goods_sum) {
						this.$tool.showToast('当前活动商品最多只能购买' + this.goodsData.max_buy_num + '件')
						return
					}
					// 获取当前用户已购买当前活动商品的数量
					let goodsNub = await http_user_seckill_order_getBuyNum({
						data: {
							id: this.cid
						}
					})
					let cont = this.goodsData.max_buy_num - goodsNub.data
					if (this.goods_sum > cont) {
						uni.showModal({
							title: '提示',
							content: '活动商品限购' + this.goodsData.max_buy_num + '件, 你已购' + goodsNub.data + '件',
							showCancel: false,
						});
						return
					}
					console.log(goodsNub, '活动商品限购');
					// return
				}
				datas = JSON.stringify(datas)
				console.log(datas);
				uni.navigateTo({
					url: '/goodsPackage/confirm-order/confirm-order?data=' + datas
				})
			},
			// 数量
			addSun(e) {
				if (e) {
					if (this.goods_sum == 99) {
						uni.showToast({
							title: '商品最多可购买99件',
							icon: 'none',
						})
						return
					}
					this.goods_sum++
				} else {
					if (this.goods_sum == 1) {
						uni.showToast({
							title: '商品数量不能低于1件',
							icon: 'none',
						})
						return
					}
					this.goods_sum--
				}
			},
			// 规格选择
			configEvent(item, index, v, i) {
				let data = this.goodsData.specs
				let arr = [...this.configActve]
				arr[index] = i
				let goods_spec = ''
				// 取出当前选中的规格字符串
				data.map((item, key) => {
					goods_spec += data[key].name + '::' + data[key].list[arr[key]].name + ';;'
				})
				goods_spec = goods_spec.slice(0, -2)
				// 对比提取当前要选中的参数
				this.goodsData.list.map((bes, key) => {
					if (bes.goods_spec == goods_spec) {
						this.selectedConfig = key
						this.number_stock = bes.number_stock
					}
				})
				this.configActve = arr
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.navbaractive = true
			} else if (e.scrollTop < 100) {
				this.navbaractive = false
			}
		},
		onShareAppMessage() {
			return {
				title: '海量秒杀，拼团商品等你来拿',
				path: '/pages/prot_details/prot_details?cid=' + this.cid + '&scene=' + uni.getStorageSync('hk_userID'),
				imageUrl: '',
				desc: '',
				content: '活动正在火热进行中，快来一起参与吧！'
			}
		}
	}
</script>

<style lang="scss">
	.zekou {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		display: inline-block;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		color: #fff;
		background: #FF890B;
	}

	.huodong {
		height: 120rpx;
		box-shadow: 0rpx 0rpx 5rpx 0rpx #FF890B;

		.left {
			background: $color-zt;
		}

		.right {
			width: 238rpx;
			background: #fff;

			.time {
				text {
					font-size: 20rpx;
					padding: 4rpx 7rpx;
					background: $color-zt;
					color: #fff;
					margin: 10rpx 5rpx 0 5rpx;
				}
			}
		}
	}
	.banner {
		image {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
		}
	
		.swiper-item {
			padding: 10rpx 0rpx;
		}
		.btn{
			width: 123rpx;
			line-height: 50rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
			background: #FF5521;
			border-radius: 25rpx;
		}
	}
	.config {
		.item {
			min-width: 100rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			text-align: center;
			background: #fff;
			border: 1px solid #000;
			border-radius: 8rpx;
			margin: 30rpx 30rpx 0 0 !important;
			padding: 0 30rpx;
			outline: none;
			transition: all 0.3s;
		}

		.actve {
			background: $color-zt;
			border: 1px solid $color-zt;
			color: #fff;
		}
	}

	.jairu {
		border-bottom: 2rpx solid #ddd;
		border-top: 2rpx solid #ddd;
	}
</style>
